<template>
  <div class="container">
    <div class="left">
      <div class="left-title">指标列表</div>
      <div class="left-operate-box">
        <a-select v-model="currentIndexConfig" :options="indexConfigList" placeholder="请选择配置" @change="currentIndexConfigChange" />
        <a-icon type="reload" :spin="loading" class="icon" title="刷新" @click="reLoadIndexConfigList" />
        <a-input v-model="searchValue" placeholder="请输入指标名称">
          <a-icon slot="suffix" type="search" />
        </a-input>
      </div>
      <div class="table-list" :style="{ display: currentIndexList.length === 0 ? 'flex' : '' }">
        <a-empty v-if="currentIndexList.length === 0" :image="emptyCustomImage" description="暂无指标" />
        <template v-else v-for="(item, index) in currentIndexList">
          <div
            v-if="item.name.indexOf(searchValue) > -1"
            :key="index"
            :class="['table-item', { active: selectedIndexOfIdList.includes(item.id) }]"
            :title="item.name"
            @click="indexSelect(item)">
            <p>{{ item.name }}</p>
          </div>
        </template>
      </div>
    </div>
    <div class="middle">
      <div class="operate-box">
        <a-select
          v-model="currentCalculateFunction"
          @change="currentCalculateFunctionChange"
          placeholder="请选择系统内置函数"
          :options="calculateFunctionList"
        >
        </a-select>
        <a-button @click="test">试计算</a-button>
      </div>
      <div ref="calculateFunctionPanel" class="select-box" :style="{ justifyContent: currentIndexList.length !== 0 && !calculateFunctionContainerHorizontalAlignIsCenter ?  'flex-start' : 'center' }">
        <a-empty v-if="currentCalculateFunction === undefined" :image="emptyCustomImage" description="请选择指标计算函数" />
        <div class="select-calculate-box" v-else>
          <template v-if="currentCalculateFunctionCode === 'yearOnYear' || currentCalculateFunctionCode === 'mouthOnMouth' || currentCalculateFunctionCode === 'yearOnYearGrowthRate' || currentCalculateFunctionCode === 'mouthOnMouthGrowthRate'">
            <span v-if="currentCalculateFunctionCode === 'yearOnYearGrowthRate' || currentCalculateFunctionCode === 'mouthOnMouthGrowthRate'" class="symbol-container">(</span>
            <div class="variable-container" :class="selectedIndexOfIdList.length === 0 ? 'variable-container-empty' : 'variable-container-full'" :style="{ display: selectedIndexOfIdList.length === 0 ? 'flex' : '' }">
              <a-empty v-if="selectedIndexOfIdList.length === 0" :image="emptyCustomImage" description="请选择计算指标" />
              <template v-else>
                <a-icon type="close" title="取消选择" @click="indexUnselect" />
                <div class="variable-details-container">
                  <span>指标名称：{{ selectedIndexList[0].name }}</span>
                  <span>时间维度：{{ currentDefaultDimension }}</span>
                </div>
              </template>
            </div>
            <span v-if="currentCalculateFunctionCode === 'yearOnYearGrowthRate' || currentCalculateFunctionCode === 'mouthOnMouthGrowthRate'" class="symbol-container">-</span>
            <div v-if="currentCalculateFunctionCode === 'yearOnYearGrowthRate' || currentCalculateFunctionCode === 'mouthOnMouthGrowthRate'" class="variable-container" :class="selectedIndexOfIdList.length === 0 ? 'variable-container-empty' : 'variable-container-full'" :style="{ display: selectedIndexOfIdList.length === 0 ? 'flex' : '' }">
              <a-empty v-if="selectedIndexOfIdList.length === 0" :image="emptyCustomImage" description="请选择计算指标" />
              <template v-else>
                <a-icon type="close" title="取消选择" @click="indexUnselect" />
                <div class="variable-details-container">
                  <span>指标名称：{{ selectedIndexList[0].name }}</span>
                  <span>时间维度：{{ currentCalculateFunctionCode === 'yearOnYear' || currentCalculateFunctionCode === 'yearOnYearGrowthRate' ? '同期' : '上期' }}</span>
                </div>
              </template>
            </div>
            <span v-if="currentCalculateFunctionCode === 'yearOnYearGrowthRate' || currentCalculateFunctionCode === 'mouthOnMouthGrowthRate'" class="symbol-container">)</span>
            <span class="symbol-container">/</span>
            <div class="variable-container" :class="selectedIndexOfIdList.length === 0 ? 'variable-container-empty' : 'variable-container-full'" :style="{ display: selectedIndexOfIdList.length === 0 ? 'flex' : '' }">
              <a-empty v-if="selectedIndexOfIdList.length === 0" :image="emptyCustomImage" description="请选择计算指标" />
              <template v-else>
                <a-icon type="close" title="取消选择" @click="indexUnselect" />
                <div class="variable-details-container">
                  <span>指标名称：{{ selectedIndexList[0].name }}</span>
                  <span>时间维度：{{ currentCalculateFunctionCode === 'yearOnYear' || currentCalculateFunctionCode === 'yearOnYearGrowthRate' ? '同期' : '上期' }}</span>
                </div>
              </template>
            </div>
            <span class="symbol-container">*</span>
            <span class="symbol-container">100%</span>
          </template>
          <template v-else>
            <a-empty description="匹配异常，请重新选择指标计算函数" />
          </template>
        </div>
      </div>
      <div class="result-title">试计算结果</div>
      <div class="result-box" :style="{ display: testResult.length === 0 ? 'flex' : '' }">
        <a-table
        v-if="testResult.length > 0"
        bordered
        class="j-table-force-nowrap"
        style="background: #ffffff;"
        rowKey="testId"
        :pagination="false"
        :columns="resultTableColumns"
        :dataSource="testResult" />
        <a-empty v-else :image="emptyCustomImage" />
      </div>
    </div>
    <div class="right">
      <div class="right-title">维度信息</div>
      <div class="right-box-1" :style="{ display: selectedIndexOfIdList.length === 0 ? 'flex' : '' }">
        <a-empty v-if="selectedIndexOfIdList.length === 0" :image="emptyCustomImage" description="请选择计算指标" />
        <template v-else v-for="(item, index) in currentDimensionList">
          <a-checkbox :key="index" :checked="item.checked" :disabled="item.disabled" @click="currentDimensionToggle(index)">
            <span :title="item.name">{{ item.name }}</span>
          </a-checkbox>
        </template>
      </div>
      <div class="right-title">指标定义</div>
      <div class="right-box-2">
        <a-form :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="指标名称">
            <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入指标名称', pattern: '[^ \x22]+' }] } ]" placeholder="请输入指标名称" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
            <a-textarea v-decorator="['remark', { 'initialValue': '' }]" allowClear autoSize placeholder="请输入备注" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据类型">
            <j-dict-select-tag v-decorator="['dataType']" dictCode="column_data_type" placeholder="请选择数据类型" :trigger-change="true" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="长度">
            <a-input-number v-decorator="['columnLength', { 'initialValue': 20 }]" :min="0" :precision="0" style="width: 100%;" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小数精度">
            <a-input-number v-decorator="['scale', { 'initialValue': 0 }]" :min="0" :precision="0" style="width: 100%;" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="统计单位">
            <a-input v-decorator="['unit', { 'initialValue': '' }]" allowClear placeholder="请输入统计单位" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否率值">
            <a-radio-group v-decorator="['isPercent', { 'initialValue': 0 }]" @change="handleIsPercentChange">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汇聚方式">
            <j-dict-select-tag v-decorator="['groupType', { rules: [{ required: form.getFieldValue('isPercent') === 0, message: '请选择汇聚方式' }]}]" dictCode="index_group_type" placeholder="请选择汇聚方式" :trigger-change="true" :disabled="form.getFieldValue('isPercent') === 1" />
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import pick from 'lodash.pick'
import elementResizeDetector from 'element-resize-detector'
import { Empty } from 'ant-design-vue'
import { getAction, postAction } from '@/api/manage'

export default {
  name: 'CreateIndexByIndex',
  props: {
    baseInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      emptyCustomImage: Empty.PRESENTED_IMAGE_SIMPLE,
      loading: false,
      currentIndexConfig: undefined, // 当前选中的指标配置项参数
      indexConfigList: [], // 指标配置项数据数组参数
      searchValue: '', // 指标模糊搜索参数
      currentIndexList: [], // 当前选中指标配置对应的指标列表数组参数
      currentDimensionList: [], // 当前选中指标配置对应的维度列表数组参数
      calculateFunctionContainerHorizontalAlignIsCenter: true,
      currentCalculateFunction: undefined, // 当前选中的指标计算函数参数
      currentCalculateFunctionCode: '', // 当前选中的指标计算函数对应代号参数
      currentCalculateFunctionMatchingDimension: [], // 当前选中的指标计算函数需要匹配的维度数组参数
      calculateFunctionList: [], // 指标计算函数数组参数
      indexDefinitionModel: {}, // 指标定义数据回填对象参数
      selectedIndexOfIdList: [], // 存放选取的指标对应的id的数组参数
      selectedIndexList: [], // 存放选取的指标对应数据的数组参数
      form: this.$form.createForm(this),
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      testCompleteFlag: false, // 试计通过标识参数，默认为false
      resultTableColumns: [],
      resultTableIndexColumn: {
        title: '#',
        dataIndex: '',
        key: 'rowIndex',
        width: 60,
        align: 'center',
        customRender: function(t, r, index) {
          return parseInt(index) + 1
        }
      },
      testResult: [],
      url: {
        indexConfigList: '/index/config/listAllConfig',
        calculateFunctionList: '/sys/dict/getDictItems/func_type',
        indexDetails: '/index/scSituationIndexInfo/queryById',
        test: '/index/config/testRunning',
        summit: '/index/config/saveIndex'
      }
    }
  },
  computed: {
    currentDefaultDimension: function() {
      const temp = this.currentDimensionList.filter(item => { return item.disabled === true })
      return temp[0].name
    }
  },
  mounted() {
    this.initIndexConfigList()
    this.initCalculateFunctionList()
    this.initCalculateFunctionContainerSizeListener()
  },
  methods: {
    // 指标配置项列表初始化获取
    initIndexConfigList() {
      if (this.loading) {
        this.$message.info('刷新太频繁')
        return
      }
      this.indexConfigList = []
      this.loading = true
      getAction(this.url.indexConfigList, {}).then(res => {
        if (res.success) {
          res.result.map(item => {
            item.value = item.id
            item.title = item.configName
            this.indexConfigList.push(item)
          })
          if (this.indexConfigList.length !== 0) {
            // 默认选中第一个配置项
            if (this.currentIndexConfig === undefined) {
              this.currentIndexConfig = this.indexConfigList[0].value
              this.currentIndexConfigChange(this.indexConfigList[0].value, {
                data: {
                  props: this.indexConfigList[0]
                }
              })
            }
          }
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    // 刷新指标配置项数据列表
    reLoadIndexConfigList() {
      this.initIndexConfigList()
    },

    // 切换指标配置事件响应
    currentIndexConfigChange(value, options) {
      console.log('value------------------------------------------------', value)
      console.log('options----------------------------------------------', options)
      this.searchValue = ''
      this.currentIndexList = options.data.props.indexInfoVoList
      this.currentDimensionList = options.data.props.dimensionInfoVoList
      this.selectedIndexOfIdList = []
      this.selectedIndexList = []
      this.form.resetFields()
      this.testCompleteFlag = false
      this.testResult = []
    },

    // 指标计算函数列表初始化获取
    initCalculateFunctionList() {
      this.calculateFunctionList = []
      getAction(this.url.calculateFunctionList, {}).then(res => {
        if (res.success) {
          this.calculateFunctionList = res.result
          if (this.calculateFunctionList.length !== 0) {
            // 默认选中第一个配置项
            if (this.currentCalculateFunction === undefined) {
              this.currentCalculateFunction = this.calculateFunctionList[0].value
              this.currentCalculateFunctionChange(this.calculateFunctionList[0].value)
            }
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 切换指标计算函数事件响应
    currentCalculateFunctionChange(value) {
      switch (value) {
        case '1':
          this.currentCalculateFunctionCode = 'yearOnYear'
          this.currentCalculateFunctionMatchingDimension = ['时间维度(年、月、周、日)', 1]
          break
        case '2':
          this.currentCalculateFunctionCode = 'mouthOnMouth'
          this.currentCalculateFunctionMatchingDimension = ['时间维度(年、月、周、日)', 1]
          break
        case '3':
          this.currentCalculateFunctionCode = 'yearOnYearGrowthRate'
          this.currentCalculateFunctionMatchingDimension = ['时间维度(年、月、周、日)', 1]
          break
        case '4':
          this.currentCalculateFunctionCode = 'mouthOnMouthGrowthRate'
          this.currentCalculateFunctionMatchingDimension = ['时间维度(年、月、周、日)', 1]
          break
        default:
          this.currentCalculateFunctionCode = ''
          this.currentCalculateFunctionMatchingDimension = []
          break
      }
      this.selectedIndexOfIdList = []
      this.selectedIndexList = []
      this.form.resetFields()
      this.testCompleteFlag = false
      this.testResult = []
      this.calculateFunctionContainerHorizontalAlignChange() // 重新计算函数容器布局方式
    },

    // 初始化指标计算函数容器尺寸监听器
    initCalculateFunctionContainerSizeListener() {
      const _this = this
      elementResizeDetector().listenTo(this.$refs.calculateFunctionPanel, () => {
        _this.calculateFunctionContainerHorizontalAlignChange()
      })
    },

    // 指标计算函数容器尺寸变化导致的布局适应事件响应
    calculateFunctionContainerHorizontalAlignChange() {
      if (this.$refs.calculateFunctionPanel.scrollWidth > this.$refs.calculateFunctionPanel.clientWidth) {
        this.calculateFunctionContainerHorizontalAlignIsCenter = false
      } else {
        this.calculateFunctionContainerHorizontalAlignIsCenter = true
      }
    },

    // 选中指标事件响应
    indexSelect(info) {
      if (!this.currentCalculateFunctionCode) {
        this.$message.warning('请先选择指标计算函数')
        return
      }
      let dimensionMatchingFlag = false
      for (const item of this.currentDimensionList) {
        if (this.currentCalculateFunctionMatchingDimension.includes(item.isDate)) {
          dimensionMatchingFlag = true
          break
        }
      }
      // 判断维度是否匹配
      if (!dimensionMatchingFlag) {
        this.$message.warning(`当前指标计算函数匹配维度为“${this.currentCalculateFunctionMatchingDimension[0]}”，所选指标不包含此维度，不允许操作`)
        return
      }
      // 选中匹配并展示维度信息
      const { id } = info
      if (!this.selectedIndexOfIdList.includes(id)) {
        // 获取指标定义数据
        getAction(this.url.indexDetails, { id: id }).then(res => {
          if (res.success) {
            this.indexDefinitionModel = Object.assign({}, res.result)
            this.$nextTick(() => {
              this.form.setFieldsValue(pick(this.indexDefinitionModel, 'name', 'remark', 'dataType', 'columnLength', 'scale', 'unit', 'isPercent', 'groupType'))
            })
            this.selectedIndexOfIdList = [id]
            this.selectedIndexList = [info]
            this.testCompleteFlag = false
            this.testResult = []
          } else {
            this.$message.error(res.message)
          }
        })
      }
      this.currentDimensionList.map(item => {
        if (this.currentCalculateFunctionMatchingDimension.includes(item.isDate)) {
          item.checked = true
          item.disabled = true
        } else {
          item.checked = false
          item.disabled = false
        }
      })
    },

    // 取消选中指标事件响应
    indexUnselect() {
      this.selectedIndexOfIdList = []
      this.selectedIndexList = []
      this.form.resetFields()
      this.testCompleteFlag = false
      this.testResult = []
    },

    // 维度选中状态切换事件响应
    currentDimensionToggle(index) {
      this.currentDimensionList[index].checked = !this.currentDimensionList[index].checked
      this.$forceUpdate()
      this.testCompleteFlag = false
    },

    // 试计算按钮点击事件响应
    test() {
      this.summit(0)
    },

    // 是否率值项选择值变化事件响应
    handleIsPercentChange() {
      this.form.resetFields(['groupType'])
    },

    // 数据提交处理方法
    // event: 0-数据试计算事件触发逻辑；1-数据保存事件触发逻辑(默认)
    summit(event = 1) {
      // 指标选择检查
      if (this.selectedIndexOfIdList.length === 0) {
        this.$message.warning('请选择指标')
        if (event) this.$emit('ok', { complete: 0 }) // 数据保存事件触发逻辑特定(前置)消息回传
        return
      }
      // 试计算完成状态检查
      if (event && !this.testCompleteFlag) {
        this.$message.warning('请点击试计算按钮，完成数据验证')
        if (event) this.$emit('ok', { complete: 0 }) // 数据保存事件触发逻辑特定消息(前置)回传
        return
      }
      // 表单验证检查
      this.form.validateFields((err, values) => {
        if (!err) {
          // 拼装数据结构
          const summitData = JSON.parse(JSON.stringify(this.baseInfo)) // 深拷贝基本信息
          // 获取拼装dataSource
          const tempMatchingArray = this.indexConfigList.filter(item => {
            return item.id === this.currentIndexConfig
          })
          summitData.dataSource = tempMatchingArray[0].dataSource
          // 拼装指标数据
          const definition = Object.assign(this.indexDefinitionModel, values) // 拼装指标定义
          definition.groupType = definition.isPercent ? undefined : definition.groupType // 根据率值选择设置汇聚方式
          const dimension = this.currentDimensionList.filter(item => { return item.checked }) // 获取已选择维度数据
          const indexData = {
            funcType: this.currentCalculateFunction,
            sit: definition,
            dim: dimension
          }
          summitData.indexData = indexData
          // 数据接口请求
          if (!event) {
            postAction(this.url.test, summitData).then(res => {
              if (res.success) {
                this.showTestResult(res.result)
                this.testCompleteFlag = true
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            postAction(this.url.summit, summitData).then(res => {
              if (res.success) {
                this.$message.success('指标增加成功')
                this.$emit('ok', { complete: 1 }) // 数据保存事件触发逻辑特定消息(后置)回传
              } else {
                this.$message.error(res.message)
              }
            }).finally(() => {
              this.$emit('ok', { complete: 0 }) // 数据保存事件触发逻辑特定消息(前置)回传
            })
          }
        } else {
          this.$message.warning('请完成指标定义的输入')
          if (event) this.$emit('ok', { complete: 0 }) // 数据保存事件触发逻辑特定消息(前置)回传
        }
      })
    },

    // 表格形式显示验证结果
    showTestResult(result) {
      this.testResult = result // 获取结果数据
      result.map((item, index) => {
        item.testId = index // 拼装数据对应索引
      })
      // 获取结果表格表头数据(默认使用第一行数据作为获取基准)
      const defaultPropertyOfBusiness = ['property'] // 系统默认业务属性字段
      const allPropertyOfBusiness = result.length > 0 ? Object.keys(result[0]) : defaultPropertyOfBusiness // 获取全部业务属性字段(可枚举属性)
      this.resultTableColumns = [this.resultTableIndexColumn] // 初始化表头数据(添加索引列)
      // 通过遍历添加业务属性字段至表头数据中
      allPropertyOfBusiness.map(item => {
        if (item !== 'testId') {
          // 跳过自定义索引字段
          this.resultTableColumns.push({
            title: item,
            align: 'center',
            width: 200,
            dataIndex: item
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-checkbox {
  top: 0;
}

::v-deep .ant-checkbox + span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep .ant-form-item {
  margin-bottom: 2px;
}

::v-deep textarea.ant-input {
  margin-bottom: -6.5px !important;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  user-select: none;

  & > .left {
    width: 220px;
    height: 100%;
    background: #fafafa;

    & > .left-title {
      height: 36px;
      line-height: 36px;
      font-size: 15px;
      color: #000022;
      text-align: center;
      background-color: #eff4f9;
    }

    & > .left-operate-box {
      position: relative;
      padding: 10px;
      border-bottom: 4px solid #ffffff;

      & > .ant-select {
        width: calc(100% - 30px);
      }

      & > .ant-input-affix-wrapper {
        width: calc(100% - 30px);
        margin-top: 10px;
      }

      .icon {
        position: absolute;
        width: 20px;
        height: 32px;
        font-size: 20px;
        top: 10px;
        right: 10px;
        cursor: pointer;
        line-height: 35px;
      }
    }

    & > .table-list {
      height: calc(100% - 138px);
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
      overflow-y: auto;

      .table-item {
        cursor: pointer;

        & > p {
          height: 36px;
          line-height: 36px;
          padding: 0 10px;
          margin-bottom: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          border-bottom: 1px dashed #e8e8e8;
        }

        &:hover,
        &.active {
          background-color: #eff4f9;
        }
      }
    }
  }

  & > .middle {
    flex: 1;
    height: 100%;
    margin-left: 15px;
    background: #fafafa;
    overflow: hidden;
    position: relative;

    & > .operate-box {
      width: 100%;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border-bottom: 4px solid #ffffff;

      & > .ant-select {
        width: calc(100% - 84px);
      }

      & > .ant-btn {
        margin-right: 0;
      }
    }

    & > .select-box {
      width: 100%;
      height: 236px;
      display: flex;
      align-items: center;
      border-bottom: 4px solid #ffffff;
      overflow-x: auto;
      & > .select-calculate-box {
        display: flex;
        align-items: center;
        & > .symbol-container {
          width: 40px;
          display: flex;
          justify-content: center;
        }
        & > .variable-container {
          min-width: 180px;
          height: 100px;
          padding: 0 14px;
          border: 1px solid #cdcdcd;
          border-radius: 4px;
          justify-content: center;
          align-items: center;

          & > ::v-deep .anticon-close {
            position: relative;
            top: 2px;
            right: calc(-100% + 2px);
            cursor: pointer;
          }

          & > .variable-details-container {
            height: calc(100% - 34px);
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-around;
          }
        }

        & > .variable-container-empty {
          background: #fafafa;
        }

        & > .variable-container-full {
          background: #ffffff;

          &:hover {
            background: #eff4f9;
          }
        }
      }
    }

    & > .result-title {
      height: 36px;
      line-height: 36px;
      font-size: 15px;
      color: #000022;
      text-align: center;
      background-color: #eff4f9;
    }

    & > .result-box {
      width: 100%;
      height: calc(100% - 318px);
      align-items: center;
      justify-content: center;
      overflow-y: auto;
    }
  }

  & > .right {
    width: 220px;
    height: 100%;
    margin-left: 15px;
    background: #fafafa;
    overflow: hidden;
    position: relative;

    & > .right-title {
      height: 36px;
      line-height: 36px;
      font-size: 15px;
      color: #000022;
      text-align: center;
      background-color: #eff4f9;
    }

    & > .right-box-1 {
      height: 40%;
      position: relative;
      padding: 0 10px;
      align-items: center;
      justify-content: center;
      border-bottom: 4px solid #ffffff;
      overflow-y: auto;

      & > ::v-deep .ant-checkbox-wrapper {
        width: 100%;
        line-height: 25px;
        display: flex;
        align-items: center;
      }

      & > ::v-deep .ant-checkbox-wrapper + .ant-checkbox-wrapper {
        margin-left: 0;
      }
    }

    & > .right-box-2 {
      height: calc(60% - 76px);
      position: relative;
      padding: 10px 10px 0 0;
      overflow-y: auto;
    }
  }
}
</style>
